import React from 'react';
import { Input } from 'antd';

/**
 * 自定义搜索下拉框
 * @param label 标签
 * @param field 字段名称
 * @param placeholder 占位符
 */
export class AxInputForSimple extends React.Component {
  constructor(props) {
    super(props);
    const value = props.axvalue;

    this.state = {
      value,
      axvalue: value,
    };
  }

  componentWillReceiveProps(newProps) {
    const { axvalue } = newProps;
    const { axvalue: preAxvalue } = this.state;

    // 这段代码可能看起来非常混乱，这个props可以被当做缓存，仅用作判断
    if (axvalue !== preAxvalue) {
      const { onChange } = this.props;
      this.setState({
        value: axvalue,
        axvalue,
      });
      if (onChange) {
        onChange(axvalue);
      }
    }
  }

  handleChange = e => {
    const { onChange } = this.props;
    this.setState({
      value: e.target.value,
    });
    if (onChange) {
      onChange(e.target.value);
    }
  };

  render() {
    const { value } = this.state;
    const { placeholder, label, ...rest } = this.props;
    return (
      <Input
        size={window.ax.config.size}
        allowClear
        placeholder={placeholder ? placeholder : `请输入${label}`}
        value={value}
        onChange={this.handleChange}
        autoComplete="off"
        {...rest}
      />
    );
  }
}
